<!DOCTYPE html>
<html>
<head>
	<title>Users</title>
	<script src="js/jquery-1.11.2.min.js"></script>
	<script src="js/angular.js"></script>
	<style type="text/css">
		label{color:green; font-weight:bold; font-family:tahoma; font-size:12px;}
		.online { border-radius: 50%;	width: 17px;height: 17px; background:green}
		.offline { border-radius: 50%;	width: 17px;height: 17px; background:red}
		.locked { border-radius: 50%;	width: 17px;height: 17px; background:gray}
	</style>
</head>
<body>
	<div ng-app="myApp" ng-controller="loadUsers" >
		<table>
			<tr ng-repeat="x in users">
				<td><div title="{{x.status}}" class="{{x.status}}"></div></td>
				<td><label>{{x.username}}</label></td>
			</tr>
		</table>
	</div>
	<script>
		var app = angular.module('myApp', []);
		app.controller('loadUsers', function($scope, $http) {
				$http.get('http://localhost:63342/demo/users.json').success(function (response) {$scope.users = response; alert(response)});
		});
	</script>
</body>
</html>